<template>
  <Header></Header>
  <img src="@/assets/image.png" class="image">
  <div class="login-container">
    <div style="margin-left: 40px;position: absolute;top: 50px;left: 30px;">
      账号<input type="text" v-model="username" placeholder="请输入账号或手机" />
      <br/><br/>
      密码<input type="password" v-model="password" placeholder="请输入密码" />
    </div>
    <button @click="loginWithPassword" class="button-login">登录</button>
  </div>
</template>

<script setup>
import Header from './Header.vue';
import router from '@/router';
import { ref } from 'vue';

const username = ref('');
const password = ref('');

function loginWithPassword() {
  if (username.value === '' && password.value === '') {
    alert('账号密码不能为空');
  }else if (username.value === 'admin' && password.value === '123456') {
    alert('登录成功');
    router.push('/homeview');
  } else {
    alert('账号或密码错误');
  }
}
</script>

<style scoped>
.login-container {
  background-color: #D6E6EE;
  position: absolute; 
  top: 250px; 
  right: 250px;
  width: 450px;
  height: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 2rem; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image{
  width: 600px;
  position: absolute;  
  top: 200px; 
  left: 120px;
}

input {
  width: 280px;
  padding: 10px;
  padding-bottom: 15px;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 2rem; 
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.button-login {
  width: 120px;
  height: 45px;
  background-color: #63A103;
  color: #0d4785;
  border: none; 
  border-radius: 2rem; 
  cursor: pointer;
  position: absolute; 
  bottom: 50px; 
  left: 180px;
}



.underline-on-click {
  text-decoration: underline;
}

</style>